<template>
	<view class="content">
		<u--image :showLoading="true" :src="imageUrl" :width="width" :height="height"
			mode="aspectFit"></u--image>
		<view class="image-scan" :style="'height:'+this.iheight+';width:'+this.iwidth">
		</view>
		<view class="scan-list">
			<u-checkbox-group  @change="radioClick">
				<view class="scan-list">
			<view class="scan-body" v-for="(item,index) in scanList" :key="index">
				<u-avatar :text="item.name.substring (0,1)" fontSize="18" randomBgColor size="55"></u-avatar>
				<view class="scan-content">
					<text>{{item.name}}</text>
					<view>
						<u-line-progress :percentage="item.score" activeColor="#ff0000">
						</u-line-progress>
					</view>
					<view style="margin-left: 5%;">
						<u-checkbox shape="circle" :name="item.name"></u-checkbox>	
					</view>
				</view>
				<u-loading-page :loading="item.name ==''"></u-loading-page>
			</view>
			</view>
		  </u-checkbox-group>
		</view>
		<u-button class="custom-style1" @click="toInsect()">上传绿地信息</u-button>
		<u-button class="custom-style" @click="btnclick()">返回</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width: '',
				height: '',
				iwidth: '',
				iheight: '',
				scanList: [],
				imageUrl: '',
				index: 0,
				name:''
			}
		},
		onLoad() {
			this.initData()
			// console.log(this.imageUrl)
		},
		methods: {
			toInsect(){
				if(this.name==''){
					this.$utils.msg("请选择害虫信息")
				}
				this.$storage.set("photoDis",this.name)
				uni.switchTab({
					url:"../upInsect/upInsect"
				});
			},
			radioClick(name){
				this.name=name
			},
			btnclick(){
				uni.switchTab({
					url:"../index/index"
				});
			},
			initData() {
				this.width = (this.$utils.getSystemInfo().w) - 20 + 'px'
				this.height = (this.$utils.getSystemInfo().h) / 3 + 'px'
				this.iwidth = (this.$utils.getSystemInfo().w) - 18 + 'px'
				this.iheight = (this.$utils.getSystemInfo().h) / 2.8 + 'px'

				this.imageUrl = this.$storage.get("imageBase64")
				try {
					this.$storage.get("photoDistinguish").forEach((value, index) => {
						this.index++
						//增加百分比
						value.score = value.score * 100
						this.scanList.push(value)
						if (this.index > 4) {
							throw new Error("到第五位就好")
						}
					})
				} catch (error) {

				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.custom-style {
		@include modules-btn;
		margin: 20rpx;
		background-color: #efefef;
		box-shadow: 0 0 5px #919191;
		width: 95%;
		color: #000000;
	}.custom-style1 {
		@include modules-btn;
		margin: 20rpx;
		// background-color: #efefef;
		box-shadow: 0 0 5px #919191;
		width: 95%;
		color: #ffffff;
	}

	.scan-content {
		width: 80%;
	}

	.scan-body {
		display: flex;
		flex-direction: row;
		margin: 10rpx;
	}

	.scan-list {
		margin-top: 20rpx;
		overflow: auto;
		width: 100%;
	}

	.content {
		margin: 20rpx;
	}

	.image-scan {
		position: fixed;
		top: 44px;
	}

	.image-scan {
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a98ca), to(#1a98ca));
		background: -webkit-linear-gradient(#1a98ca, #1a98ca);
		background: -moz-linear-gradient(#1a98ca, #1a98ca);
		background: -o-linear-gradient(#1a98ca, #1a98ca);
		background: linear-gradient(#1a98ca, #1a98ca), linear-gradient(90deg, #ffffff33 1px, transparent 0, transparent 19px), linear-gradient(#ffffff33 1px, transparent 0, transparent 19px), linear-gradient(transparent, #ffffff);
		background-size: 100% 1.5%, 10% 100%, 100% 8%, 100% 100%;
		background-repeat: no-repeat, repeat, repeat, no-repeat;
		background-position: 0% 0%, 0 0, 0 0, 0 0;
		animation: move 2s infinite linear;
		/* 初始位置 */
		clip-path: polygon(0% 0%, 100% 0%, 100% 1.5%, 0% 1.5%);

		/* 终止位置 */
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}


	@keyframes move {
		to {
			background-position: 0 100%, 0 0, 0 0, 0 0;
		}
	}
</style>
